<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery 发送 AJAX 请求</title>
    <!-- crossorigin： 发送请求时不会携带当前域名下的cookie-->
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求</h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>
    <script>
        const BASE_URL = "http://localhost:8000"
        $('button').eq(0).click(function () {
            $.get(BASE_URL + '/jquery-server',
                { a: 100, b: 200 },
                function (data) {
                    console.log(data);
                },
                'json')
        });
        $('button').eq(1).click(function () {
            $.post(BASE_URL + '/jquery-server',
                { a: 100, b: 200 },
                function (data) {
                    console.log(data);
                }
            )
        });
        $('button').eq(2).click(function(){
            $.ajax({
                //url
                url:BASE_URL+'/jquery-server',
                // data
                data: {a:100, b:200},
                // method
                type: 'get',
                // response data type
                dataType: 'json',
                // success callback
                success: function(data){
                    console.log(data);
                },
                // failure callback
                error: function(){
                    console.log("error!");
                },
                // timeout 
                timeout: 2000,
                // header
                headers:{
                    c:300,
                    d:400
                }
            })
        });
    </script>
</body>